<template>
  <div class="my">
    <div class="my-header">
      <div class="my-header-top">
        <div class="my-header-top-fun">
          <div class="my-header-top-fun-edit" @touchend="isEditShow=true">
            <van-icon size="25px" name="edit" />
          </div>
          <div class="my-header-top-fun-setting">
            
            <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect" placement="bottom-end">
              <template #reference>
                <van-icon size="25px" name="setting-o" />
              </template>
            </van-popover>
          </div>
        </div>
        <div class="my-header-top-user">
          <div class="my-header-top-user-name">
            <h2>{{userData.userName ? userData.userName : "请登录"}}</h2>
          </div>
          <div class="my-header-top-user-headPic">
            <van-image 
              width="90px"
              height="90px"
              round='true'
              :src="userData.userImgUrl" 
            />
          </div>
        </div>
      </div>
      <div class="my-header-bottom">
        <div class="my-header-bottom-desc">
          <span>{{userData.userDesc}}</span>
        </div>
        <div class="my-header-bottom-detail">
          <div>
            <h2>{{userData.fans}}</h2>
            <p>粉丝</p>
          </div>
          <div>
            <h2>{{userData.follow}}</h2>
            <p>关注</p>
          </div>
          <div>
            <h2>{{hasClub ? '社长' : '用户'}}</h2>
            <p>身份</p>
          </div>
        </div>
      </div>
    </div>
    <div class="my-nav">
      <van-grid :gutter="10" :border="false" :icon-size="35">
        <van-grid-item icon="clock-o" text="最近浏览"/>
        <van-grid-item icon-prefix="aliIconfont" icon="icon-pinglun" text="我的评论"/>
        <van-grid-item icon-prefix="aliIconfont" icon="icon-dianzan" text="我赞过的"/>
        <van-grid-item icon-prefix="aliIconfont" icon="icon-suit_club" text="我的社团" @click="toMyClub"/>
      </van-grid>
    </div>
    <div class="my-creativeSpace">
      <FlexBlock
        @set-is-expend='setIsExpend'
      >
        <template #content>
          <div class="my-creativeSpace-content">
            <div class="my-creativeSpace-content-userLevel">
              <div class="my-creativeSpace-content-userLevel-userInfo">
                <div class="my-creativeSpace-content-userLevel-userInfo-icon">
                  <van-icon size="65px" color="#FFC069" name="award"/>
                </div>
                <div class="my-creativeSpace-content-userLevel-userInfo-text">
                  <div>
                    <h3>创作者等级 <span>LV0</span></h3>
                  </div>
                  <div style="color:#8CA2AA">
                    <p>您已创作 <span>{{num}}</span> 篇内容</p>
                  </div>
                </div>
              </div>
              <div class="my-creativeSpace-content-userLevel-levelProgress">
                <div class="my-creativeSpace-content-userLevel-levelProgress-bar">
                  <van-progress :percentage="10" :stroke-width="8" color="#FFA940" :show-pivot="false"></van-progress>
                </div>
                <div class="my-creativeSpace-content-userLevel-levelProgress-text">
                  <span>创作分数 146 /500</span>
                  <span>Lv1</span>
                </div>
              </div>
            </div>
            <div class="my-creativeSpace-content-nav">
              <div @click="isAnalyseShow=true" :class="{'my-creativeSpace-content-nav-isActive':isExpend}">
                <div>
                  <van-icon class-prefix="aliIconfont" color="#fff" size="50px" name="icon-zhexiantu" />
                </div>
                <div>
                  <h2>内容分析</h2>
                </div>
              </div>
              <div @click="isManageShow=true" :class="{'my-creativeSpace-content-nav-isActive':isExpend}">
                <div>
                  <van-icon class-prefix="aliIconfont" color="#fff" size="50px" name="icon-jichuguanli" />
                </div>
                <div>
                  <h2>内容管理</h2>
                </div>
              </div>
            </div>
          </div>
        </template>
      </FlexBlock>
    </div>
    <div >
      <UserInfoEdit @setIsEditHide="setIsEditHide" :isEditShow="isEditShow" />
      
      <div class="contentAnalyse">
        <van-popup v-model:show="isAnalyseShow" style="height:600px" round position="bottom">
          <ContentAnalyse/>
        </van-popup>
      </div>
      <div class="contentManage">
        <van-popup v-model:show="isManageShow" style="height:600px" round position="bottom">
          <ContentManage/>
        </van-popup>
      </div>
    </div>
    <div class="my-icon">
      <van-image
        width="100%"
        :src="require('../../../../素材/videos/valentines_day_PNG39552.jpg')"
      />
    </div>
  </div>
</template>
<script>
import UserInfoEdit from "./components/UserInfoEdit"
import { Image as VanImage, Grid, GridItem, Progress, Popup, Icon, Popover } from "vant";
import { onBeforeMount, ref } from 'vue';
import ContentAnalyse from "./components/ContentAnalyse";
import ContentManage from "./components/ContentManage";
import FlexBlock from "@/components/flexBlock"
import { getUserData, getUserArticles, getUserVideos, getUserClub } from "@/service/user";
export default {
  mounted(){
    getUserArticles().then(res1=>{
      getUserVideos().then(res2=>{
        this.num = res1.length + res2.length
      })
    })
    getUserClub().then(res=>{
      if(res.length != 0){
        this.hasClub = true;
      }
    })
  },
  data(){
    return {
      num:0,
      hasClub:""
    }
  },
  setup(){
    const userData = ref('');
    const isEditShow = ref(false);
    const isWritingShow = ref(false);
    const isAnalyseShow = ref(false);
    const isManageShow = ref(false);
    const isExpend = ref(false);
    const showPopover = ref(false);
    const actions=[
      {text:"退出"}
    ]
    const onSelect = action=>{
      if(action.text == '退出'){
        let reg = new RegExp('(^| )' + 'token' + '=([^;]*)(;|$)');
        let exp = new Date();
        exp.setTime(exp.getTime() - 1);
        if (unescape(document.cookie.match(reg)) != 'null') {
          document.cookie =
            'token =' +
            unescape(document.cookie.match(reg)[2]) +
            ';expires=' +
            exp.toGMTString();
        }
        location.reload();
      }
    }
    const setIsExpend = (value)=>{
      isExpend.value = value;
    }
    const setIsEditHide = ()=>{
      isEditShow.value = false;
      getUserData().then(res=>{
        userData.value = res;
      })
    }
    onBeforeMount(()=>{
      getUserData().then(res=>{
        userData.value = res;
      })
    })
    return {
      userData,
      isEditShow,
      isWritingShow,
      isExpend,
      isAnalyseShow,
      isManageShow,
      showPopover,
      actions,
      onSelect,
      setIsEditHide,
      setIsExpend,
    }
  },
  methods:{
    toMyClub(){
      this.$router.push('/myClub');
    }
  },
  components:{
    [Icon.name]: Icon,
    [VanImage.name]: VanImage,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Progress.name]: Progress,
    [Popup.name]: Popup,
    [Popover.name]:Popover,
    ContentAnalyse,
    ContentManage,
    FlexBlock,
    UserInfoEdit
}
}
</script>
<style lang="less">
.my{
  .my-header{
    height: 250px;
    box-shadow: 2px 2px 2px #999;
    border-radius: 0 0 40px 40px;
    overflow: hidden;
    .my-header-top{
      height: 50%;
      background: #FFE7BA;
      padding: 15px;
      box-sizing: border-box;
      position: relative;
      .my-header-top-fun{
        display: flex;
        justify-content: space-between;
      }
      .my-header-top-user{
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-left: 15px;
      }
      .my-header-top-user-headPic{
        width: 120px;
        height: 120px;
        border-radius: 400px;
        background: #FFE7BA;
        margin-right: 10px;
        transform: translateY(30%);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .my-header-bottom{
      height: 50%;
      padding: 10px 15px;
      background: #FBFBFB;
      .my-header-bottom-desc{
        margin-left: 15px;
        width: 50%;
        text-align: left;
        color:#919191;
      }
      .my-header-bottom-detail{
        display: flex;
        >div{
          margin: 0 15px;
          h2{
            margin:0;
            margin-top: 25px;
            
            font-family: "楷体";
          }
          p{
            margin: 0;
            font-size: 14px;
            color:#919191;
          }
        }
      }
    }
  }
  .my-nav{
    margin: 15px;
    .van-grid{
      .van-grid-item__content{
        background: #FFE7BA;
        border-radius: 20px;
        overflow: hidden;
        color: orange;
        .van-grid-item__text{
          font-weight: bolder;
        }
      }
    }
  }
  .my-creative{
    border-radius: 0 0 20px 20px;
    box-shadow: 2px 2px 2px #999;
    overflow: hidden;
    margin-bottom: 15px;
    .my-creative-header{
      height: 2.75rem;
      line-height: 2.75rem;
      font-size: 1.5625rem;
    }
    .diy_card{
      .diy_card_header{
        overflow: hidden;
        border-radius: 0.625rem 0.625rem 0 0;
        box-shadow: 2px 2px 2px #999;
        background: #FFE7BA;
      }
      .diy_card_content{
        background:#FBFBFB;
        position: relative;
        z-index: -11;
      }
    }
    .my-creative-content{
      display: flex;
      justify-content: space-around;
      >div{
        >h1{
          color: orange;
        }
      }
    }
  }
  .my-creativeSpace-content{
    .my-creativeSpace-content-title{
      font-size: 18px;
      font-weight: 600;

    }
    .my-creativeSpace-content-userLevel{
      margin: 15px 10px 0 10px;
      padding: 10px 0;
      height: 100px;
      border-radius: 10px;
      background: #fff;
      .my-creativeSpace-content-userLevel-userInfo{
        display: flex;
        .my-creativeSpace-content-userLevel-userInfo-icon{
          transform: translateY(-45%);
        }
        .my-creativeSpace-content-userLevel-userInfo-text{
          >div{
            text-align: left;
            h3{
              margin: 0;
            }
            p{
              margin: 0;
              font-size: 14px;
            }
          }
        }
      }
      .my-creativeSpace-content-userLevel-levelProgress{
        margin: 0 15px;
        .my-creativeSpace-content-userLevel-levelProgress-text{
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 12px;
          color: #FF9959;
          >span{
            display: block;
          }
        }
      }
    }
    .my-creativeSpace-content-nav{
      display: flex;
      margin:10px 5px;
      >div{
        flex: 1;
        margin: 0 4px;
        height: 100px;
        background: orange;
        border-radius: 10px;
        position: relative;
        overflow: hidden;
        >div{
          width:100%;
          transition-property: top,bottom,opacity;
          transition-duration: .5s;
          &:nth-child(1){
            position: absolute;
            top: -0.9375rem;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
          }
          &:nth-child(2){
            position: absolute;
            bottom: -0.9375rem;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0
          }
          h2{
            margin: 0;
            font-size: 20px;
            color:#fff;
          }
        }
      }
    }
    .my-creativeSpace-content-nav-isActive{
      >div{
        &:nth-child(1){
          top: .5rem!important;
          opacity: 1!important;
        }
        &:nth-child(2){
          bottom: .5rem!important;
          opacity: 1!important;
        }
      }
      
    }
  }
  .my-icon{
    position: absolute;
    bottom: 100px;
    z-index: -11;
  }
}
</style>